<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Landmark Finder</title>
		<meta charset="UTF-8" />
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
		<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
		<script type="text/javascript">
			$(document).bind("mobileinit", function() {
				$.mobile.page.prototype.options.addBackBtn = true;
			});

		</script>
		<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
		<script type="application/javascript">
			$(document).ready(function() {
				// Add a click listener on the button to get the location data
				$('#getLocation').click(function() {
					if(navigator.geolocation) {
						navigator.geolocation.getCurrentPosition(onSuccess, onError);
						//console.log(navigator.geolocation.getCurrentPosition);
					} else {
						// If location is not supported on this platform, disable it
						$('#getLocation').value = "Geolocation not supported";
						$('#getLocation').unbind('click');
					}
				});
			});
			// create the geonames namespace for calling the API
			var geonames = {};
			geonames.baseURL = "http://ws.geonames.org/";
			geonames.method = "findNearbyWikipediaJSON";
			
			geonames.search = function(lat, lng) {

				// get the data in JSON format from Geonames
				$.getJSON(geonames.baseURL + geonames.method + '?formatted=true&lat=' + lat + '&lng=' + lng + '&style=full&radius=10&maxRows=25&username=ryanstewart', function(data) {

					// Loop through each item in the result and add it to the DOM
					$.each(data.geonames, function() {
						$('<li></li>').hide().append('<a href="http://' + this.wikipediaUrl + '"><h2>' + this.title + '</h2></a><br /><p>' + this.summary + '</p><span class="ui-li-aside"><h5>' + this.distance + ' (km)</h5></span>').appendTo('#wikiList').show();
					});
					// Once the data is added to the DOM, make the transition
					$.mobile.changePage('#dashboard', "slide", false, true);

					// refresh the list to make sure the theme applies properly
					$('#wikiList').listview('refresh');

				});
			};
			// Success function for Geolocation call
			function onSuccess(position) {
				alert('getting position');
				geonames.search(position.coords.latitude, position.coords.longitude);
			}

			// Error function for Geolocation call
			function onError(msg) {
				geonames.search(47.667622, -122.384946);
			}
		</script>
	</head>
	<body>
		<div data-role="page">
			<div data-role="header">
				<h1>Find Location</h1>
			</div>
			<div data-role="content">
				<p>
					This application will use the <a href="http://geonames.org">Geonames</a> API and
					your location to bring back a list of Wikipedia articles about features that are near you.
					To get started, click the button below and allow the application to read your geolocation
					information.
				</p>
				<input type="button" value="Get My Location" id="getLocation" />
			</div>
			<div data-role="footer">
				<h4>By <a href="http://blog.digitalbackcountry.com">Ryan Stewart</a></h4>
			</div>
		</div>
		
		
		
		<div data-role="page" id="dashboard">
			<div data-role="header">
				<h1>Data List</h1>
			</div>
			<div data-role="content">
				<ul id="wikiList" data-role="listview" data-theme="c">
				</ul>
			</div>
			<div data-role="footer">
				<h4>By <a href="http://blog.digitalbackcountry.com">Ryan Stewart</a></h4>
			</div>
		</div>
	</body>
</html>